<template>
  <div>
    <div class=" text-center text-xl">"不要停止对巴勒斯坦的讨论"</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

const data = [{ name: '加沙', value: 3328 }, { name: '哈马斯', value: 1045 }, {
  name: '约旦河西岸',
  value: 834
}, { name: '儿童', value: 804 }, { name: '耶路撒冷', value: 532 }, { name: '种族宗教', value: 493 }, {
  name: '政客商人', value: 479
}, { name: '人道主义危机', value: 387 }, { name: '反犹主义', value: 289 }, {
  name: '炮弹轰击',
  value: 287
}, { name: '独立国家', value: 233 }, { name: '国际援助', value: 228 }, { name: '犹太人', value: 207 },
{ name: '隔离墙', value: 206 }, { name: '石油', value: 201 }, { name: '医疗设施', value: 180 }, {
  name:
    '俄罗斯', value: 178
}, { name: '美国', value: 151 }, { name: '中东地区', value: 143 }, {
  name: '饥荒', value:
    139
}, { name: '领土', value: 137 }, { name: '“两国方案”', value: 132 }, { name: '“两国方案”', value: 129 }, {
  name: '安全栅栏', value: 116
}, { name: '和平进程 ', value: 108 }, { name: '水权争议', value: 107 }, {
  name: '基督徒', value: 103
}, { name: '奥斯陆协议', value: 98 }, { name: '定居点 ', value: 93 }, {
  name: '和平',
  value: 77
}, { name: '“两国方案”', value: 74 }].slice()

// tooltip
const tooltip = {
  trigger: 'item',
  padding: [10, 15],
  textStyle: {
    fontSize: 20
  },
  formatter: params => {
    const { name, value } = params

    return `
				关键词：${name} <br/>
				频率：${value}
			`
  }
}
// 随机颜色
const randcolor = () => {
  const r = 100 + ~~(Math.random() * 100);
  const g = 135 + ~~(Math.random() * 100);
  const b = 100 + ~~(Math.random() * 100);
  return `rgb(${r}, ${g}, ${b})`
}
// series
const series = [{
  type: 'wordCloud',
  gridSize: 10,
  sizeRange: [12, 50],
  rotationRange: [0, 0],
  shape: 'circle',
  textStyle: {
    color: params => {
      return randcolor()
    },
    emphasis: {
      shadowBlur: 10,
      shadowColor: '#333'
    }
  },
  data: data,




}]


// 获取 dom 实例
const target = ref(null)

// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  mChart = echarts.init(target.value)
  // 渲染 echarts
  renderChart()
})


// 渲染图表
const renderChart = () => {
  const options = {

    tooltip, series
  };
  mChart.setOption(options)
}

// 监听数据的变化，重新渲染图表
// watch(
//   () => regions,
//   () => {
//     renderChart()
//   }, {
//   deep: true
// }

// )
</script>

<style lang="scss" scoped></style>
